<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<html>
<head>

<title>排序和价格</title>
<script type="text/javascript">
	$(function() {
		$("input.sortBarPrice").keyup(function() {
			var num = $(this).val();
			if (num.length == 0) { //如果什么都没输入，显示全部商品信息并且结束function
				$("div.productUnit").show();
				return;
			}

			num = parseInt(num);
			if (isNaN(num)) //isNaN()函数判断是否为数字  true为非数字，false为数字
				num = 1;
			if (num <= 0)
				num = 1;
			$(this).val(num);

			var begin = $("input.beginPrice").val(); //获取最低价格
			var end = $("input.endPrice").val(); //获取最高价格
			if (!isNaN(begin) && !isNaN(end)) { //如果begin和end都为数字，显示所有符合价格条件的商品
				$("div.productUnit").hide(); //先隐藏所有商品，然后在筛选
				$("div.productUnit").each(function() {
					var price = $(this).attr("price");
					price = new Number(price);
					if (price<=end && price> = begin) {
						$(this).show();
					}
				});
			}

		});
	});
</script>
</head>

<div class="categorySortBar">
	<table class="categorySortBarTable categorySortTable">
		<tbody>
			<tr>
				<td <c:if test="${param.sort=='all'||empty param.sort}">class="grayColumn"</c:if>>
					<a href="?category.id=${category.id}&sort=all">综合<span class="glyphicon glyphicon-arrow-down"></span></a>
				</td>
				<td <c:if test="${param.sort=='review'||empty param.sort}">class="grayColumn"</c:if>>
					<a href="?category.id=${category.id}&sort=review">人气<span class="glyphicon glyphicon-arrow-down"></span></a>
				</td>
				<td <c:if test="${param.sort=='date'||empty param.sort}">class="grayColumn"</c:if>>
					<a href="?category.id=${category.id}&sort=date">新品<span class="glyphicon glyphicon-arrow-down"></span></a>
				</td>
				<td <c:if test="${param.sort=='saleCount'||empty param.sort}">class="grayColumn"</c:if>>
					<a href="?category.id=${category.id}&sort=saleCount">销量<span class="glyphicon glyphicon-arrow-down"></span></a>
				</td>
				<td <c:if test="${param.sort=='price'||empty param.sort}">class="grayColumn"</c:if>>
					<a href="?category.id=${category.id}&sort=price">价格<span class="glyphicon glyphicon-resize-vertical"></span></a>
				</td>
			</tr>
		</tbody>
	</table>

	<table class="categorySortBarTable">
		<tbody>
			<tr>
				<td><input type="text" placeholder="请输入"
					class="sortBarPrice beginPrice"></td>
				<td class="grayColumn priceMiddleColumn">-</td>
				<td><input type="text" placeholder="请输入"
					class="sortBarPrice endPrice"></td>
			</tr>
		</tbody>
	</table>
</div>

</html>